<template>
  <div>
    <div class="list_form">
      <div class="list_inp">
        <el-input v-model="searchText"></el-input>
      </div>
      <div class="list_sel">
        <span>专业选择：</span>
        <el-select v-model="CategoryOne">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in opt1"
            :key="index"
          ></el-option>
        </el-select>
        <el-select v-model="CategoryTwo">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in opt2"
            :key="index"
          ></el-option>
        </el-select>
        <el-select v-model="CategoryThree">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in opt3"
            :key="index"
          ></el-option>
        </el-select>
        <el-button type="success" @click="toSearch">查询</el-button>
      </div>
      <el-button type="primary" @click="toAddCourse">添加</el-button>
    </div>
    <div class="list_table">
      <table-title width="100%" title-text="课程列表"></table-title>
      <el-table border stripe :data="courseList">
        <el-table-column label="课程名称" prop="Cname"></el-table-column>
        <el-table-column label="课程代号" prop="Cnumber"></el-table-column>
        <el-table-column label="在学人数" prop="onlineUser"></el-table-column>
        <el-table-column label="编辑日期">
          <template slot-scope="scope">
            <div>{{ new Date(scope.row.createAt).toLocaleString() }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.isState == '1'
                  ? '草稿'
                  : scope.row.isState == '2'
                  ? '上架'
                  : '下架'
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link
                type="primary"
                @click="toEdit(scope.row.ID, scope.row._id)"
                >编辑</el-link
              >
              <el-link type="success" @click="toSell(scope.row.ID)">{{
                scope.row.isState == '1'
                  ? '草稿'
                  : scope.row.isState == '2'
                  ? '下架'
                  : '上架'
              }}</el-link>
              <el-link type="danger" @click="toDel(scope.row._id)"
                >删除</el-link
              >
              <el-link
                :type="scope.row.isTop ? 'warning' : 'success'"
                @click="toTop(scope.row.ID)"
                >{{ scope.row.isTop ? '取消置顶' : '置顶' }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev,pager,next"
        :total="total"
        :page-size="pageSize"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import cateData from '../../Mixins/cate'
import {
  _getCourseList,
  _delCourse,
  _topCourse,
  _goShop
} from '../../api/courselist'
export default {
  mixins: [cateData],
  data () {
    return {
      CategoryOne: '',
      CategoryTwo: '',
      CategoryThree: '',
      pageStart: 1,
      searchText: '',
      courseList: [],
      total: 0,
      pageSize: 3
    }
  },
  created () {
    this.getList()
  },
  methods: {
    toEdit (ID, _id) {
      // 去课程编辑
      this.$store.commit('setList', ['课程管理', '课程编辑'])
      this.$router.push({
        name: 'courseadd',
        query: {
          _id: _id,
          ID: ID,
          isEdit: 'true' //课程编辑
        }
      })
      this.$bus.$emit('sendmenu', '课程添加')
    },
    toAddCourse () {
      // 去到课程添加
      this.$store.commit('setList', ['课程管理', '课程添加'])
      this.$router.push({ name: 'courseadd' })
      this.$bus.$emit('sendmenu', '课程添加')
    },
    async toDel (_id) {
      //删除课程
      var res = await _delCourse(_id)
      console.log(res)
      this.$message.success('删除成功')
      this.getList()
    },
    async toSell (ID) {
      //上架
      var res = await _goShop(ID)
      this.getList()
    },
    async toTop (ID) {
      var res = await _topCourse(ID)
      console.log(res)
      this.getList()
    },
    pageChange (val) {
      //分页
      this.pageStart = val
      this.getList()
    },
    toSearch () {
      //搜索
      this.getList()
      this.searchText = ''
      this.CategoryOne = ''
      this.CategoryTwo = ''
      this.CategoryThree = ''
    },
    async getList () {
      //获取课程列表接口
      var res = await _getCourseList({
        pageStart: this.pageStart,
        searchText: this.searchText,
        CategoryOne: this.CategoryOne,
        CategoryTwo: this.CategoryTwo,
        CategoryThree: this.CategoryThree
      })
      console.log(res)
      this.courseList = res.data.data.list
      this.total = res.data.data.count
      this.pageSize = res.data.data.pageSize
    }
  }
}
</script>
<style lang="less" scoped>
.list_form {
  width: 80%;
  height: 40px;
  margin: 20px 0;
  display: flex;
  .list_inp {
    width: 280px;
  }
  .list_sel {
    flex: 1;
    display: flex;
    line-height: 40px;
    justify-content: space-around;
  }
}
.list_table {
  width: 80%;
  margin-top: 30px;
}
</style>
